<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:fb="http://ogp.me/ns/fb#">
	
	<head>
		<meta name="layout" content="main"/>
		<title>Police Map</title>
		
		<style type="text/css" media="screen">
			#status {
				background-color: #eee;
				border: .2em solid #fff;
				margin: 2em 2em 1em;
				padding: 1em;
				width: 12em;
				float: left;
				-moz-box-shadow: 0px 0px 1.25em #ccc;
				-webkit-box-shadow: 0px 0px 1.25em #ccc;
				box-shadow: 0px 0px 1.25em #ccc;
				-moz-border-radius: 0.6em;
				-webkit-border-radius: 0.6em;
				border-radius: 0.6em;
			}

			.ie6 #status {
				display: inline; /* float double margin fix http://www.positioniseverything.net/explorer/doubled-margin.html */
			}

			#status ul {
				font-size: 0.9em;
				list-style-type: none;
				margin-bottom: 0.6em;
				padding: 0;
			}

			#status li {
				line-height: 1.3;
			}

			#status h1 {
				text-transform: uppercase;
				font-size: 1.1em;
				margin: 0 0 0.3em;
			}

			#page-body {
				margin: 2em 1em 1.25em 18em;
			}

			h2 {
				margin-top: 1em;
				margin-bottom: 0.3em;
				font-size: 1em;
			}

			p {
				line-height: 1.5;
				margin: 0.25em 0;
			}

			#controller-list ul {
				list-style-position: inside;
			}

			#controller-list li {
				line-height: 1.3;
				list-style-position: inside;
				margin: 0.25em 0;
			}

			@media screen and (max-width: 480px) {
				#status {
					display: none;
				}

				#page-body {
					margin: 0 1em 1em;
				}

				#page-body h1 {
					margin-top: 0;
				}
			}
		</style>

<script type="text/javascript">
    var centro = new google.maps.LatLng(51.508742,-0.120850);
    var arena = new google.maps.LatLng(-5.826633,-35.211988);
    var geocoder = new google.maps.Geocoder();
    var map;
    var markers = [];
    var ocorrencias = [];
 
    var latlng;
    var arrayPoligono = [];
    var bermudaTriangle;

    function colocaViatura(lat, lng, rotulo){
    	var viatura = new google.maps.LatLng(lat,lng);
    	var marker3=new google.maps.Marker({
            position:viatura,
            icon:'images/marcador3.png'
          });

    	var infowindow = new google.maps.InfoWindow({
    	      content: rotulo
   	     });

  	     infowindow.open(map,marker3);

  	   	marker3.setMap(map);

  	  	arrayPoligono.push(viatura);
  	   	
  	   	//adicionando marcador na lista
  	   	markers.push(marker3); 
    }
    

    function initialize() {
      var mapProp = {
        center:arena,
        zoom:14,
        mapTypeId:google.maps.MapTypeId.HOADMAP
      };

      map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

      var marker2=new google.maps.Marker({
        position:arena,
        icon:'images/fifa.png'
      });

     marker2.setMap(map);
   
     var infowindow = new google.maps.InfoWindow({
      content:"Área Restrita"
     });

     infowindow.open(map,marker2);

    var raio = new google.maps.Circle({
      center:arena,
      radius:1000,
      strokeColor:"#0000FF",
      strokeOpacity:0.8,
      strokeWeight:2,
      fillColor:"#0000FF",
      fillOpacity:0.4,
      editable:false
     });
  
     raio.setMap(map);

     google.maps.event.addListener(map, 'click', function(event) {
   	   latlng = event.latLng;
       arrayPoligono.push(latlng);
       placeMarker(event.latLng, $("#tipomarcador").val());
     });

     carregarViaturas();
    }

    $(document).ready(function(){
       initialize();
       $("#botao1").click(function(){ 
          localizar($("#local").val());
       });
    });

    function localizar(address) {
        geocoder.geocode( { 'address': address}, function(results, status) {    
            if (status == google.maps.GeocoderStatus.OK) {
              map.setCenter(results[0].geometry.location);
              placeMarker(results[0].geometry.location, $("#info").val());
              
            } else {
              alert('Geocode was not successful for the following reason: ' + status);
            }
        });
    }

    function placeMarker(location, texto) {
     var icone = 'images/' + document.getElementById("tipomarcador").value + '.png' 
     //alert(location);
      var marker = new google.maps.Marker({
        position: location,
        map: map,
        //animation:google.maps.Animation.BOUNCE,
        //icon: icone,
      });

      marker.setMap(map);
      
      var infowindow = new google.maps.InfoWindow({
        content: texto
      });
      infowindow.open(map,marker);

	  //adicionando marcador na lista
      ocorrencias.push(marker);
    }
    
    function desenharPoligono(){
    	bermudaTriangle = "";
    	bermudaTriangle = new google.maps.Polygon({
    	    paths: arrayPoligono,
    	    strokeColor: '#FF0000',
    	    strokeOpacity: 0.8,
    	    strokeWeight: 2,
    	    fillColor: '#FF0000',
    	    fillOpacity: 0.35
    	  });
    	 
    	  bermudaTriangle.setMap(map);
    	 
    	}

    setInterval(function(){carregarViaturas()},10000);
    
	function carregarViaturas() {
		deleteMarkers();
	        $.ajax({
	            type: "GET",
	            url: "http://dppserver.cchla.ufrn.br/PoliceMap/Service/consultarViaturas",
	            cache: false,
	            dataType: "xml",
	            success: function(xml) {
	                $(xml).find('viatura').each(function(){
	                    var nome = $(this).find("nome").text()
	                    var lat = $(this).find("lat").text()
	                    var lng = $(this).find("lng").text()
	                    colocaViatura(lat, lng, nome);
	                });
	            }
        });
	}

	// Sets the map on all markers in the array.
	function setAllMap(map) {
	  for (var i = 0; i < markers.length; i++) {
	    markers[i].setMap(map);
	  }
	}

 	// Removes the markers from the map, but keeps them in the array.
    function clearMarkers() {
      setAllMap(null);
    }

 	// Deletes all markers in the array by removing references to them.
    function deleteMarkers() {
      clearMarkers();
      markers = [];
    }
    
</script>
		
</head>
	<body>
	
	<div id="fb-root"></div>
	<script type="text/javascript" src="js/likebuttontest.js" ></script>
	<script type="text/javascript" src="js/loginFacebook.js" ></script>
	
	 <div id="divBoxed" class="container">

		<div class="transparent-bg"
			style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; zoom: 1;"></div>

		<div class="divPanel notop nobottom">
			<div class="row-fluid">
				<div class="span12">
					<br>
					<div>
						<div align="left" class="fb-like" data-href="http://dppserver.cchla.ufrn.br/PoliceMap/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
						<fb:login-button style="padding-left:51%" align="right" scope="public_profile,email" onlogin="checkLoginState();"></fb:login-button>
					</div>
					<div id="divLogo" class="pull-left">
						<a href="#">
							<div id="divSiteTitle">Mapa Policial</div>
							<div id="divTagLine">Aplicação para Monitoramento Policial</div>
						</a>
					</div>

						<div id="divMenuRight" class="pull-right">
							<div class="navbar">
								<button type="button"
									class="btn btn-navbar-highlight btn-large btn-primary"
									data-toggle="collapse" data-target=".nav-collapse">
									NAVIGATION <span class="icon-chevron-down icon-white"></span>
								</button>
								<div class="nav-collapse collapse">

									<ul class="nav nav-pills ddmenu">

										<li id="buscalink"><a href="#">Buscar</a></li>

										<li id="adicionarlink"><a href="#">Adicionar</a></li>

										<li id="sobrelink"><a href="#">Sobre</a></li>
									</ul>
								</div>
							</div>
						</div>
				</div>
			</div>
	
		<div align="center"><br>
 			  Info: <input id="info" type="text"/>     
		      Local: <input id="local" type="text"/>
		      
		      <select id="tipomarcador">
				  <option value="Roubo">Roubo</option>
				  <option value="Tráfico">Tráfico</option>
				  <option value="Homicídio">Homicídio</option>
				  <option value="Outros">Outros</option>
			  </select>
		      
		      <button class="btn btn-primary btn-lg active" id="botao1">Salvar</button>
		      <input class="btn btn-default btn-lg active" type="button" value="Criar Desenho" onclick="desenharPoligono();"/>
			  <br> <br>
			  <div id="googleMap" style="width:1080px;height:500px;"></div><br>
		
		</div>	
		
		<h2>Comentar no Facebook</h2>
		<div class="fb-comments" data-href="http://dppserver.cchla.ufrn.br/PoliceMap/" data-numposts="5" data-colorscheme="light"></div>
		
		<div id="footerOuterSeparator"></div>

		<div id="divFooter" class="footerArea">

			<div class="divPanel">

				<br /> <br />
				<div class="row-fluid">
					<div class="span12">
						<p class="copyright">Copyright © 2014 Your Company. All Rights
							Reserved.</p>

						<p class="social_bookmarks">
							<a href="#"><i class="social foundicon-facebook"></i> Facebook</a>
							<a href=""><i class="social foundicon-twitter"></i> Twitter</a> <a
								href="#"><i class="social foundicon-pinterest"></i> Pinterest</a>
							<a href="#"><i class="social foundicon-rss"></i> Rss</a>
						</p>
					</div>
				</div>

			</div>
		</div>	
	</body>
</html>
